<template>
	<view>
		<u-tabs :list="tabsList" :current="current" @change="tabsChange" :bold="false" :is-scroll="false"
			active-color="#222" inactive-color="#888" height="88" font-size="24"
			:barStyle="{backgroundColor:'#03C75A',height:'4rpx'}"></u-tabs>

		<view class="pt10">
			<u-cell-item bg-color="#fff" :key="i" v-for="(x,i) in list" :title="x.title"
				:title-style="{fontSize:'30rpx',color:'#222'}" :value="x.amount"
				:value-style="{fontSize:'32rpx',color:'#222'}" :label="x.created_at"
				:label-style="{fontSize:'24rpx',color:'#888'}" :arrow="false"></u-cell-item>

			<view class="pt15 pb15">
				<u-empty text="亲，暂无相关数据" v-if="list.length==0 && loading=='nomore'" icon-size="200" font-size="28"
					margin-top="200"></u-empty>

				<u-loadmore v-else :status="loading" />
			</view>
		</view>
	</view>
</template>

<script>
	import * as Api from '@/api/assets/income/index.js'
	export default {
		data() {
			return {
				loading: 'loadmore',
				page: 0,
				current: 0,
				list: [],
				tabsList: [{
					type: '',
					name: '全部'
				}, {
					type: 'withdraw',
					name: '提现'
				}, {
					type: 'week_prize',
					name: '周奖励'
				}, {
					type: 'week_prize',
					name: '月奖励'
				}, {
					type: 'recommend_prize',
					name: '推荐奖'
				}]
			};
		},
		methods: {
			tabsChange(index) {
				this.current = index;
				this.list = [];
				this.page = 0;
				this.loading = 'loadmore';
				this.getList();
			},
			async getList() {
				if (this.loading == 'loading' || this.loading == 'nomore') return;
				this.loading = 'loading';
				const res = await Api.balanceLog({
					page: ++this.page,
					type: this.tabsList[this.current].type
				});
				if (res.data) {
					let {
						current_page,
						total,
						data,
					} = res.data;

					if (data) {
						this.page = current_page;
						this.list = this.list.concat(data)
					} else {
						this.list = []
						total = 0;
					}

					setTimeout(() => {
						if (this.list.length >= total) this.loading = 'nomore';
						else this.loading = 'loadmore';
					}, 500)
				}
			}
		},

		onReachBottom() {
			this.getList();
		},
		created() {
			this.getList();
		}
	}
</script>

<style lang="scss">

</style>